<template>
    <div>
      <el-row class="bread-nav">
        <ul class="bread-nav-title">
          <span>子账号 -></span>
          <span v-if="type === 'add'">新增</span>
          <span v-if="type === 'edit'">修改</span>
        </ul>
      </el-row>

      <div class="content">
        <table class="myTable">
          <thead>
            <tr>
              <th colspan="5">
                账户资料
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="1" class="deepColor textRight">{{info.class}}子账户</td>
              <td colspan="4" class="textLeft">
                <input v-if="type === 'add'" type="text" v-model="form.username">
                <span v-if="type === 'edit'">{{form.username}}</span>
              </td>
            </tr>
            <tr>
              <td colspan="1" class="deepColor textRight">登入密码</td>
              <td colspan="4" class="textLeft">
                <input type="text" v-model="form.user_auth_key">
              </td>
            </tr>
            <tr>
              <td colspan="1" class="deepColor textRight">子账户名称</td>
              <td colspan="4" class="textLeft">
                <input type="text" v-model="form.nickname">
              </td>
            </tr>
              <tr>
                <td colspan="1" class="deepColor textRight" rowspan="2">各权限设定</td>
                <td colspan="4" class="textLeft">
                  <label>
                    <input type="checkbox" v-model="realtime_order">即时注单
                  </label>
                  <label>
                    <input type="checkbox" v-model="flow_order">流水注单
                  </label>
                  <label>
                    <input type="checkbox" v-model="auto_padding">自动补货
                  </label>
                </td>
              </tr>
              <tr>
                <td colspan="4" class="textLeft">
                  <label>
                    <input type="checkbox" v-model="sub_manage">下线管理
                  </label>
                  <label>
                    <input type="checkbox" v-model="report_exchange">交收报表查询
                  </label>
                  <label>
                    <input type="checkbox" v-model="backend_log">后台更新日志
                  </label>
                </td>
              </tr>
          </tbody>
        </table>

        <el-row class="submitBottom">
          <button @click="submit">
            确认
          </button>
          <button @click="goBack">
            取消
          </button>
        </el-row>

      </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'addSubAccountList',
    methods: {
      submit() {
        this.form.menus = []
        if (this.realtime_order) {
          this.form.menus.push('realtime_order')
        }
        if (this.flow_order) {
          this.form.menus.push('flow_order')
        }
        if (this.sub_manage) {
          this.form.menus.push('sub_manage')
        }
        if (this.auto_padding) {
          this.form.menus.push('auto_padding')
        }
        if (this.report_exchange) {
          this.form.menus.push('report_exchange')
        }
        if (this.backend_log) {
          this.form.menus.push('backend_log')
        }

        if (this.form.username === '' || this.form.username === null) {
          alert(this.info.class + '子账户名不能为空')
        } else if (this.form.nickname === '' || this.form.nickname === null) {
          alert('子账户名称不能为空')
        } else if (this.form.user_auth_key === '' || this.form.user_auth_key === null) {
          alert('登入密码不能为空')
        } else {
          if (this.type === 'add') {
            this.$store
              .dispatch('ValidateAddSubAccount', { SubAccountForm: this.form })
              .then(response => {
                this.loading = false
                console.log('response.length === 0', response.status)
                if (response.status) {
                  this.loading = true
                  // 服务端验证通过
                  this.$store
                    .dispatch('AddSubAccount', { SubAccountForm: this.form })
                    .then(res => {
                      this.loading = false
                      this.$message({
                        message: '新增成功!',
                        type: 'success',
                      })
                      setTimeout(() => {
                        this.$router.push('/user/subAccountList')
                      }, 1000)
                    })
                    .catch(error => {
                      console.log(error)
                      this.loading = false
                    })
                } else {
                  // 验证失败
                  this.$message({
                    message: Object.values(response.message)[0].toString(),
                    type: 'error',
                  })
                  console.log('服务器端验证失败')
                }
              })
              .catch(error => {
                console.log(error)
                this.loading = false
              })
          } else if (this.type === 'edit') {
            const tempForm = JSON.parse(JSON.stringify(this.form))
            delete tempForm.username
            const tempParams = {
              SubAccountUpdateForm: tempForm,
              username: this.form.username,
            }
            console.log(tempParams)
            this.$store
              .dispatch('ValidateUpdateSubAccount', tempParams)
              .then(response => {
                this.loading = false
                console.log('response.length === 0', response.status)
                if (response.status) {
                  this.loading = true
                  // 服务端验证通过
                  this.$store
                    .dispatch('UpdateSubAccount', tempParams)
                    .then(res => {
                      this.loading = false
                      this.$message({
                        message: '修改成功!',
                        type: 'success',
                      })
                      setTimeout(() => {
                        this.$router.push('/user/subAccountList')
                      }, 1000)
                    })
                    .catch(error => {
                      console.log(error)
                      this.loading = false
                    })
                } else {
                  // 验证失败
                  this.$message({
                    message: Object.values(response.message)[0].toString(),
                    type: 'error',
                  })
                  console.log('服务器端验证失败')
                }
              })
              .catch(error => {
                console.log(error)
                this.loading = false
              })
          }
        }
      },
      goBack() {
        this.$router.go(-1)
      },
      getRouterData() {
        this.type = this.$route.query.type
        this.userInfo = this.$route.query.userInfo
        if (this.type === 'edit') {
          this.form = this.userInfo
          this.$store.dispatch('GetSubAccInfo', { username: this.form.username })
            .then(response => {
              console.log(response)
              if (response.menus) {
                for (const key in response.menus) {
                  if (key === 'realtime_order') {
                    this.realtime_order = true
                  }
                  if (key === 'flow_order') {
                    this.flow_order = true
                  }
                  if (key === 'sub_manage') {
                    this.sub_manage = true
                  }
                  if (key === 'auto_padding') {
                    this.auto_padding = true
                  }
                  if (key === 'report_exchange') {
                    this.report_exchange = true
                  }
                  if (key === 'backend_log') {
                    this.backend_log = true
                  }
                }
              }
            })
        }
      },
    },
    computed: {
      ...mapGetters(['info']),
    },
    data() {
      return {
        type: '',
        userInfo: '',
        realtime_order: false, // 即时注单
        flow_order: false, // 流水注单
        sub_manage: false, // 下线管理
        auto_padding: false, // 自动补货
        report_exchange: false, // 交收报表查询
        backend_log: false, // 后台更新日志
        loading: false,
        form: {
          username: '',
          nickname: '',
          user_auth_key: '',
          menus: [],
        },
      }
    },
    created() {
      this.getRouterData()
    },
  }
</script>

<style scoped>

  .content{
    padding: 5px;
  }
  .bread-nav {
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }

  .bread-nav-title {
    color: #386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .deepColor{
    background-color: #F2F2F2;
  }
  .textLeft{
    text-align: left !important;
  }
  .textRight{
    text-align: right !important;
  }

  .submitBottom{
    text-align: center;
    margin-top: 20px;
  }
  .submitBottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -134px;
    border: 0px;
  }
  .submitBottom button:hover{
    background: url(/static/agent/img/nav_bu.png) repeat-x left -165px;
    color:#fff100;
  }
</style>
